<template>
  <el-dialog :width="props.width" :close-on-click-modal="false">
    <el-form :model="searchForm" :label-width="120" ref="advanceSearchFormRef">
      <el-row>
        <template v-for="(item, key) in props.advanceSearchList" :key="key">
          <template v-if="item.jsonFiled">
            <template v-for="(json, index) in item.jsonFiled" :key="index">
              <template v-if="json.showInSearch">
                <template v-if="json.isInterval">
                  <el-col :span="json.span || 24">
                    <el-form-item
                      :label="json.label + '：'"
                      :prop="item.filedName + '.' + json.filedName + 'Start'"
                    >
                      <component
                        v-model="
                          searchForm[item.filedName][json.filedName + 'Start']
                        "
                        :is="formItemList[item.formType]"
                        v-bind="getCtrlMeta(item)"
                      ></component>
                    </el-form-item>
                  </el-col>
                  <el-col :span="json.span || 24">
                    <el-form-item
                      :label="json.label + '：'"
                      :prop="item.filedName + '.' + json.filedName + 'End'"
                    >
                      <component
                        v-model="
                          searchForm[item.filedName][json.filedName + 'End']
                        "
                        :is="formItemList[item.formType]"
                        v-bind="getCtrlMeta(item)"
                      ></component>
                    </el-form-item>
                  </el-col>
                </template>
                <template v-else>
                  <el-col :span="json.span || 24">
                    <el-form-item
                      :label="json.label + '：'"
                      :prop="item.filedName + '.' + json.filedName"
                    >
                      <component
                        v-model="searchForm[item.filedName][json.filedName]"
                        :is="formItemList[item.formType]"
                        v-bind="getCtrlMeta(item)"
                      ></component>
                    </el-form-item>
                  </el-col>
                </template>
              </template>
            </template>
          </template>
          <template v-else>
            <template v-if="item.showInSearch">
              <template v-if="item.isInterval">
                <el-col :span="item.span || 24">
                  <el-form-item
                    :label="item.label + '：'"
                    :prop="item.filedName + 'Start'"
                  >
                    <component
                      v-model="searchForm[item.filedName + 'Start']"
                      :is="formItemList[item.formType]"
                      v-bind="getCtrlMeta(item)"
                    ></component>
                  </el-form-item>
                </el-col>
                <el-col :span="item.span || 24">
                  <el-form-item label="-" :prop="item.filedName + 'End'">
                    <component
                      v-model="searchForm[item.filedName + 'End']"
                      :is="formItemList[item.formType]"
                      v-bind="getCtrlMeta(item)"
                    ></component>
                  </el-form-item>
                </el-col>
              </template>
              <template v-else>
                <el-col :span="item.span || 24">
                  <el-form-item
                    :label="item.label + '：'"
                    :prop="item.filedName"
                  >
                    <component
                      v-model="searchForm[item.filedName]"
                      :is="formItemList[item.formType]"
                      v-bind="getCtrlMeta(item)"
                    ></component>
                  </el-form-item>
                </el-col>
              </template>
            </template>
          </template>
        </template>
      </el-row>
    </el-form>
    <template #footer>
      <el-button
        style="float: left"
        type="primary"
        @click="
          close();
          confirm();
        "
        >确定</el-button
      >
      <el-button @click="close()">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { formItemList } from "@/components/form/formItem/MapElFormItem";
import FiledProperty from "@/models/FiledProperty";
import { Ref, ref } from "vue";

export interface SearchProps {
  advanceSearchList?: Array<FiledProperty>; // 组合查询的选项列表
  advancedSearchForm?: Record<string, unknown>;
  width?: string; // 弹窗的宽度
}

const searchForm = ref({} as Record<string, unknown>); // 多条件表查询时传给后端的搜索条件.

const props = withDefaults(defineProps<SearchProps>(), {
  width: "50%",
  advanceSearchList: () => {
    return [];
  },
  advancedSearchForm: () => {
    return {};
  },
});
const emits = defineEmits<{
  (e: "confirm", searchForm: Ref<Record<string, unknown>>): void;
  (e: "close"): void;
}>();
const test = () => {
  searchForm.value = props.advancedSearchForm;
};
test();
const getCtrlMeta = (item: FiledProperty) => {
  const temp = JSON.parse(JSON.stringify(item)) as FiledProperty; // 深拷贝解决地址引用问题
  if (temp.meta) {
    temp.meta.disabled = false;
  }
  return temp.meta || {};
};
const close = () => {
  emits("close");
};
const confirm = () => {
  console.log(searchForm);
  emits("confirm", searchForm);
};
</script>

<style scoped></style>
